<template>
	<view class="swiperArea">
		<swiper :autoplay="true" :interval="3000" :duration="1000" circular @change="onChange">
			<swiper-item v-for="item in dataList" :key="item.id">
				<navigator :url="item.herfUrl">
					<image :src="item.imgUrl" mode=""></image>
				</navigator>
			</swiper-item>
		</swiper>
		<view class="indicator">
			<text v-for="(item, index) in dataList" :key="item.id" class="dot" :class="index === activeIndex ? 'active' : ''"></text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			dataList: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		data() {
			return {
				activeIndex: 0
			}
		},
		onLoad(){
		},
		methods: {
			onChange(e){
				this.activeIndex = e.detail.current
			}
		}
	}
</script>

<style lang="scss">
	.swiperArea{
		height: 100%;
		position: relative;
		swiper{
			swiper-item{
				navigator{
					image{
						width: 100%;
					}
				}
			}
		}
		.indicator{
			    position: absolute;
			    left: 0;
			    right: 0;
			    bottom: 16rpx;
			    display: flex;
			    justify-content: center;
				.dot {
				      width: 30rpx;
				      height: 6rpx;
				      margin: 0 8rpx;
				      border-radius: 6rpx;
				      background-color: rgba(255, 255, 255, 0.4);
				    }
					.active {
					      background-color: #fff;
					    }
		}
	}
</style>